import React, { Component } from 'react'
import { fromJS } from 'immutable'
export default class App extends Component {
    state = {
        userinfo: fromJS({ 
            age: 18,
            name: 'chuck',
            city: {
                province: '大连'
            },
            hobby: ['吃瓜','打篮球','打排球']
        })
    }
    componentDidMount(){
        console.log(this.state.userinfo)
    }
  render() {
    return (
      <div>
        <div>
            年龄：{this.state.userinfo.get('age')}
            <button style={{marginLeft: '50px'}} onClick={()=>{
                this.setState({
                    userinfo: this.state.userinfo.set('age', '38').set('name','小红') // 多次修改两个以上属性
                })
            }}>edit Age</button>
            <hr></hr>
        </div>
        <div>
            姓名：{this.state.userinfo.get('name')}
            <button style={{marginLeft: '50px'}}>edit Name</button>
            <hr></hr>
        </div>
        <div>
            城市：{this.state.userinfo.getIn(['city', 'province'])}
            <button style={{marginLeft: '50px'}} onClick={()=>{
                this.setState({
                    userinfo: this.state.userinfo.updateIn(['city', 'province'], ()=>{
                        return '北京'
                    })
                })
            }}>edit CIty</button>
            <hr></hr>
        </div>
        <div>
            爱好：
                <ul>
                    {this.state.userinfo.get('hobby').map((item, index)=>{
                        return (
                            <div>
                                {/* 深层次调用 */}
                                <li key={item}>{item}<button style={{marginLeft: '100px'}} onClick={(index)=>{
                                    this.setState({
                                        userinfo: this.state.userinfo.updateIn(['hobby'], (list)=> list.splice(index, 1))
                                    })
                                }}>delete</button></li>
                                
                            </div>
                            
                        )
                    })}
                </ul>
        </div>
      </div>
    )
  }
}
